<template>
    <view class="container" v-if="true">
        <view class="tab-header">
            <view :class="{'tab-item':true,'active':activeTab==0}" @click="changeTab(0)">
                <text>考勤</text>
            </view>
            <view :class="{'tab-item':true,'active':activeTab==1}" @click="changeTab(1)">
                <text>薪酬</text>
            </view>
            <view :class="{'tab-item':true,'active':activeTab==2}" @click="changeTab(2)">
                <text>假期余额</text>
            </view>
        </view>
        <view class="content">
            <tab1 v-if="activeTab==0"></tab1>
            <tab2 v-if="activeTab==1"></tab2>
            <tab3 v-if="activeTab==2"></tab3>
        </view>
       
        
    </view>
    <view class="notLogin" v-else>
        <view>未登录，请<text style="color: blue;">重试</text></view>
    </view>
</template>
<script setup lang="ts">
import tab1 from './components/tab1.vue';
import tab2 from './components/tab2.vue';
import tab3 from './components/tab3.vue';
import { ref, onMounted } from 'vue';
import { isLogin, login } from "@/utils/login";
import { onLoad } from '@dcloudio/uni-app';
async function LoginFun() {
	const isLoginFlag = isLogin()
	console.log("------------")
	console.log(isLoginFlag)
	if (isLoginFlag) {
		console.debug("用户已登录")
	} else {
		console.debug("用户未登录")
		await login()
	}
}
onLoad(async () => {
	await LoginFun()
})
const activeTab = ref(0); // 初始选中的标签索引
const changeTab = (index: number) => {
    activeTab.value = index;
};
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    padding: 24rpx;
    .tab-header {
        width: 700rpx;
        display: grid;
        height: 120rpx;
        grid-template-columns: repeat(3, 1fr);
        .tab-item {
            border: 1px solid #e6e6e6;
            text-align: center;
            line-height: 120rpx;
            background-color: #fff;
            font-size: 34rpx;
            cursor: pointer;
        }

        .active {
            background-color: rgb(248, 248, 248);
            color: rgb(89, 166, 255);
        }
    }
}
.notLogin{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 34rpx;
    width: 100%;
}
</style>